<script setup >
import { ref, onMounted, onUnmounted } from 'vue';
import _ from 'lodash';

const props = defineProps(['selected','options', 'placeholder', 'disabled']);
const emit = defineEmits(['update:selected']);
const isOpenOptions = ref(false)


function changeSelect(item) {
    emit('update:selected', item['value'])
    selected_option.value = item
}

function toggleOption(e) {
    e.stopPropagation()
    isOpenOptions.value = !isOpenOptions.value
}

function closeOption() {
    isOpenOptions.value = false
}

onMounted(() => {
    document.addEventListener('click', closeOption)
})
onUnmounted(() => {
    document.removeEventListener('click', closeOption)
})

const selected_option = ref(props.options.find((o) => o['value'] === props.selected))


</script>
<template>
    <div class="single-select" >
        <div v-if="props.disabled" class="disabled" >
            <div>{{ selected_option['text'] }}</div>
        </div>
        <div v-else  class="selected" @click="toggleOption" >

            <div v-if="selected_option == undefined" >{{ props.placeholder }}</div>
            <div v-else >{{ selected_option['text'] }}</div>
            <img src="/src/assets/images/student/arrow-down.svg" alt="Arrow-down" width="22" :class="{'rotate': isOpenOptions}" >
        </div>
        <div class="options" :class="{open: isOpenOptions}"  >
            <div v-for="(item, index) in props.options" :key="index" @click="changeSelect(item)" :class="{selected: selected_option['value'] === item['value']}" >
                {{ item['text'] }}
            </div>
        </div>
    </div>

</template>
<style scoped >

.single-select {
    position: relative;
    border: solid 1px #8a8a8a;
    background-color: transparent;
    border-radius: 10px;
    font-size: 16px;
    font-family: Source Han Sans CN;
}

.disabled {
    cursor: not-allowed;
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
    padding: 5px 5px 5px 10px;
    color: #C0C4CC;
    letter-spacing: 1px;
}

.single-select > .selected {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    user-select: none;
    padding: 5px 5px 5px 10px;
    letter-spacing: 1px;
}

.single-select > .selected > img {
    position: absolute;
    top: 5px;
    right: 5px;
    transition: transform 0.2s;
}

.single-select > .selected > img.rotate {
    transform: rotate(-180deg);
}

@keyframes open {
    from {
        opacity: 0;
        top: 50%;
    }
    to {
        opacity: 1;
        top: 120%;
    }
}

.single-select > .options {
    position: absolute;
    display: none;
    top: 120%;
    left: 0px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    animation-name: open;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    z-index: 21;
    
}

.single-select > .options.open {
    display: block;
}

.single-select > .options > div {
    /* padding: 9px 17px 11px 17px; */
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    padding: 5px 5px 5px 10px;
}

.single-select > .options > div.selected {
    color: blue;

}

.single-select > .options > div:hover {
    background-color: rgba(137, 190, 178, 0.8);
}




</style>